import { LitElement, html, css, styleMap } from 'lit';
import 'card-ui';
import { stylesString } from './styles.js';

export class KpArticle extends LitElement {
  static styles = [
    css([stylesString])
  ];

  static properties = {
    preview: {type: Boolean},
    title: {type: String},
    url: {type: String},
    image: {type: String},
    description: {type: String},
    type: {type: String},
    extra: {type: Object},
  }

  constructor() {
    super();
    this.preview = false;
    this.title = '';
    this.url = '';
    this.image = '';
    this.description = '';
    this.type = '';
    this.extra = {};
  }

  formatDatetime(val) {
    const date = new Date(val);
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  }

  linkElement(url, content, className, forcePreview = false) {
    return this.preview || forcePreview ?
      html`<span class="${className}">${content}</span>` :
      html`<a class="${className}" target="_blank" href="${url}">${content}</a>`;
  }
  
  linkElementNew(content, url) {
    return (this.preview || !url) ? content : html`<kpc-link href="${url}">${content}</kpc-link>`;
  }
  
  cardElement({ cardLayout, cardUrl, cardSite, cardTitle, cardDesc }) {
    return html`
      ${this.linkElement(cardUrl, html`
        ${cardLayout === 'small'
          ? html`<div class="image ${!this.image ? 'empty' : ''}" style="background-image: url(${this.image || ''});"></div>`
          : html`<img src="${this.image}" />`
        }
        <div class="info">
          <kpc-typography variant="caption" color="secondary">${cardSite}</kpc-typography>
          <kpc-typography class="title" variant="body2">${cardTitle}</kpc-typography>
          <kpc-typography class="desc" variant="body2" color="secondary">${cardDesc}</kpc-typography>
        </div>`, `card ${cardLayout}`)}`
  }

  rtElement({ rtAvatar, rtName, rtUsername, rtDatetime, rtText, rtImage }) {
    return html`<div class="rt">
      <div class="header">
        ${rtAvatar && html`<kpc-avatar class="avatar" size="small" src="${rtAvatar}" />`}
        <kpc-typography class="name" variant="caption">${rtName}</kpc-typography>
        <kpc-typography class="username" variant="caption" color="secondary">${rtUsername}</kpc-typography>
      </div>
      <div class="content">
        <kpc-typography class="desc" variant="body2">${rtText}</kpc-typography>
        ${rtImage && html`<img src="${rtImage}" />`}
      </div>
    </div>`
  }

  render() {
    const {
      avatar, profileUrl, name, username, datetime,
      cardLayout, cardUrl, cardSite, cardTitle, cardDesc,
      rtAvatar, rtName, rtUsername, rtDatetime, rtText, rtImage
    } = this.extra;
    const authstyles = avatar ? {flexDirection: 'column'} : {flexDirection: 'row', alignItems: 'center'};

    return html`
      <div class="wrap">
        <header>
          ${avatar && html`<kpc-avatar class="avatar" src="${avatar}" href="${profileUrl}" ?preview="${this.preview}" />`}
          <div class="user" style=${styleMap(authstyles)}>
            ${name && html`<kpc-link class="name" color="primary" href="${profileUrl}">${name}</kpc-link>`}
            ${datetime && html`
            <section class="info">
              <kpc-link class="username" href="${profileUrl}" variant="caption" color="secondary">${username}</kpc-link>
              <kpc-typography class="split" variant="caption" color="secondary">·</kpc-typography>
              <kpc-typography class="datetime" variant="caption" color="secondary"><time datetime="${datetime}">${this.formatDatetime(datetime)}</time></kpc-typography>
            </section>`}
          </div>
        </header>
        <main>
          ${this.description && html`<kpc-typography class="description">${this.description}</kpc-typography>`}
          ${cardUrl
            ? this.cardElement({ cardLayout, cardUrl, cardSite, cardTitle, cardDesc })
            : (this.image && html`<kpc-picture src="${this.image}" class="cover"></kpc-picture>`)}
          ${rtAvatar && this.rtElement({ rtAvatar, rtName, rtUsername, rtDatetime, rtText, rtImage })}
        </main>
      </div>
    `;
  }
}

window.customElements.define('TAG_NAME', KpArticle);
